<template>
	<section>
		<block>
			<!--工具条-->
			<!--<el-col :span="24" class="toolbar" style="padding-bottom: 0px;height: 56px;">-->
			<!--<el-form :inline="true">-->
			<!--<el-form-item label="处理状态">-->
			<!--<el-radio class="radio" v-model="isProcessed" label="未处理">未处理</el-radio>-->
			<!--<el-radio class="radio" v-model="isProcessed" label="已处理">已处理</el-radio>-->
			<!--</el-form-item>-->
			<!--<el-form-item style="margin-left: 72%;">-->
			<!--<i class="el-icon-custom-refresh refresh-icon" @click="fnRefresh"></i>-->
			<!--</el-form-item>-->
			<!--</el-form>-->
			<!--</el-col>-->

			<!--待办事项列表-->
			<el-table :data="meals" border v-loading="mealsLoading" class="meal-list">
				<el-table-column prop="ID" label="#" width="60">
				</el-table-column>
				<el-table-column prop="ApplyDate" label="申请日期">
				</el-table-column>
				<el-table-column prop="VisitDate" label="就餐日期">
				</el-table-column>
				<el-table-column prop="Dept" label="申请部门">
				</el-table-column>
				<el-table-column prop="Applicant" label="申请人">
				</el-table-column>
				<el-table-column prop="VisitorDept" label="来访单位">
				</el-table-column>
				<el-table-column prop="MealNum" label="就餐人数">
				</el-table-column>
				<!--<el-table-column prop="Mobile" label="联系电话">-->
				<!--</el-table-column>-->
				<!--<el-table-column prop="Status" label="申请状态">-->
				<!--</el-table-column>-->
				<!--<el-table-column prop="Isprocessed" label="是否处理" :formatter="fnIsProcessedFormat">-->
				<!--</el-table-column>-->
				<el-table-column label="操作" width="100">
					<template scope="scope">
						<el-button type="primary" size="small" v-if="!scope.row.Isprocessed" @click="emitJumpPage(scope.row.ID,scope.row.ApplyID)">处理</el-button>
						<el-button size="small" v-else @click="emitJumpPage(scope.row.ID,scope.row.ApplyID)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!--工具条-->
			<el-col :span="24" class="toolbar">
				<el-pagination layout="total, prev, pager, next" @current-change="fnPaginationChange" :page-size="size" :total="total" style="float:right;">
				</el-pagination>
			</el-col>
		</block>

		<block>
			<el-col :span="24" class="sec-title">包厢使用情况</el-col>
			<!--工具条-->
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;height: 56px;">
				<el-form :inline="true">
					<el-form-item>
						<el-date-picker v-model="filters.StartDate" type="date" placeholder="开始日期" @change="fnGetStart"></el-date-picker>
					</el-form-item>
					<el-form-item>起6天内的包厢使用状态</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="fnGetUseState">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>

			<!--餐厅列表-->
			<el-table :data="allUseDate" border v-loading="useStateLoading" class="restaurants-list">
				<el-table-column fixed prop="Room.Name" label="" width="100">
				</el-table-column>
				<el-table-column  :label="item" v-for="(item, key) in allUseDateHeader" style="padding: 0;">
					<template scope="scope">
						<block v-for="item in bookingInfo[scope.$index][key].Booking">
							<el-tag type="primary" v-if="item === '早餐'">{{item}}</el-tag>
							<el-tag type="danger" v-if="item === '午餐'">{{item}}</el-tag>
							<el-tag type="success" v-if="item === '晚餐'">{{item}}</el-tag>
						</block>
							<!--<span style="display: inline-block;width: 33%;height: 100%;background: red;">{{bookingInfo[scope.$index][key].Booking | bookings}} </span>-->
						<!--<span v-for="booking in bookingInfo[scope.$index][key].Booking">{{booking}} </span>-->
					</template>
				</el-table-column>
			</el-table>
		</block>


	</section>
</template>

<script>
    import Svc from '../../../service/index.js'
    import moment from 'moment'
	export default {
		props:['is-processed'],
		data() {
			return {
				empID:'',//当前用户员工ID
				total:0,
				skip:0,
				size:3,
				mealsLoading:false,
				meals:[],
                filters : {
                    StartDate : moment(new Date()).format('YYYY-MM-DD')
                },
                useStateLoading : false,
                allUseDate : [], //所有的包厢使用详情(包括包厢信息)
                bookingInfo : [], //所有的包厢使用详情(不包括包厢信息)
                allUseDateHeader : [] //包厢使用的时段
			}
		},
//		watch:{
//			isProcessed:function(val,oldVal){
//				if (val != oldVal) {
//					this.fnGetMeals()
//				}
//			}
//		},
		methods: {
			//自定义事件->跳转到详细页面
			emitJumpPage(taskID,applyID){
				this.$emit('jump-page',taskID,applyID,this.isProcessed)
			},
            //显示message提示框
            openMessage : function(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
            },
            //格式化->时间
            fnDateFormat(row, column) {
            	var moment = require('moment');
                var date = row[column.property];  
	          	if (date == "") {  
	             	return "------";  
	          	}  
	          	return moment(date).format("YYYY-MM-DD HH:mm:ss");  
            },
            //格式化->是否已处理
//            fnIsProcessedFormat(row, column) {
//	          	if (row.Isprocessed) {
//	             	return "已处理";
//	          	}
//	          	return "未处理";
//            },
            //获取当前用户员工ID
            fnGetEmpID(){
				var user = sessionStorage.getItem('user');
				if (user) {
					user = JSON.parse(user);
					this.empID = user.EmployeeID || '';
				}
            },
			//分页
			fnPaginationChange(val) {
				this.skip = val-1;
				this.fnGetMeals();
			},
			//获取待办事项列表
			fnGetMeals : function() {
				var that = this
				that.mealsLoading = true
				//skip代表数据下标，从0开始
				var params = {
					Skip: that.skip*that.size,
					Size: that.size,
					EmpID: that.empID,
                    IsProcessed:false
//				    IsProcessed: (that.isProcessed == "未处理") ? false : true
				};
				
	            Svc.fnPostData('/api/account/mytask',params,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.meals = res.body.Data.List
	            		that.total = res.body.Data.Total
	            		that.mealsLoading = false
	            	} else {
	            		that.openMessage("待办事项获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
			},
			//刷新页面
			fnRefresh(){
				this.$router.go(0)
			},
            //获取开始日期
            fnGetStart(val){
                if (val) {
                    this.filters.StartDate = moment(val).format('YYYY-MM-DD')
                } else {
                    this.filters.StartDate = val
                }
            },
			// 获取包厢使用情况
            fnGetUseState(){
                var that = this
                that.allUseDateHeader = []
                that.bookingInfo = []
                var params = {
                    Start: that.filters.StartDate,
                    End: ''
                }
                Svc.fnPostData('/api/meal/roomusage',params,function(res){
                    if (res.body.ErrCode == 0){
                        that.allUseDate = res.body.Data
                        that.allUseDate.forEach(function (item,index) {
                            if (index === 0) {
                                item.BookingInfo.forEach(function (t) {
                                    that.allUseDateHeader.push(t.Date)
                                })
                            }
                            that.bookingInfo.push(item.BookingInfo)
                        })
                    } else {
                        that.openMessage("包厢状态获取失败！",'error')
                    }
                },function(){
                    that.openMessage("网络错误，请重新！",'error')
                })
            }
		},
		mounted() {
			//获取当前用户员工ID
			this.fnGetEmpID()
			//获取待办事项列表
			this.fnGetMeals()
            // 获取包厢使用情况
            this.fnGetUseState()
		}
	}
</script>

<style scoped>
	.meal-list{
		width: 100%;
		margin-top: 20px;
	}

	.toolbar {
	    background: #f2f2f2;
	    padding: 10px;
	    margin: 10px 0;
	}
	
	.refresh-icon{
		font-size: 22px;
    	margin-top: 7px;
    	cursor: pointer;
	}

	.sec-title {
		font-size: 15px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #475669;
		padding-top: 30px;
		padding-bottom: 15px;
	}

</style>